<template>
  <div class="file-viewer-page">
    <!-- 返回按钮 -->
    <div class="back-button">
      <el-button type="primary" link @click="handleBack">
        <el-icon><ArrowLeft /></el-icon>
        返回上一页
      </el-button>
    </div>

    <!-- 页面头部 -->
    <div class="page-header">
      <h1 class="file-title">{{ fileTitle }}</h1>
      <div class="file-meta">
        <span class="file-type">文件类型: {{ fileTypeText }}</span>
        <span class="file-size">{{ fileSize }}</span>
      </div>
    </div>

    <!-- Word文档查看器 -->
    <div  class="word-viewer-container">
      <div class="viewer-controls">
        <el-button size="small" @click="downloadFile">
          <el-icon><Download /></el-icon> 下载文档
        </el-button>
        <el-button size="small" @click="reloadDocument">
          <el-icon><Refresh /></el-icon> 重新加载
        </el-button>
      </div>

      <div class="viewer-content">
        <div v-if="loading" class="loading-overlay">
          <el-icon class="loading-icon"><Loading /></el-icon>
          <span>文档转换中...</span>
        </div>

        <div v-if="error" class="error-message">
          <el-alert type="error" :title="error" show-icon />
        </div>

        <div
            v-if="htmlContent && !loading"
            class="word-content-container"
        >
          <div class="word-content" v-html="htmlContent"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { ArrowLeft, Download, Loading, Refresh } from '@element-plus/icons-vue'
import * as mammoth from 'mammoth'

const route = useRoute()
const router = useRouter()

const loading = ref(false)
const error = ref('')
const htmlContent = ref('')

const fileType = ref('docx')
const fileTitle = ref('测试Word文档')
const fileTypeText = ref('Word文档')
const fileSize = ref('2.1MB')
const fileUrl = ref('/pdfjs/test.docx')

const handleBack = () => {
  router.back()
}

const downloadFile = () => {
  const link = document.createElement('a')
  link.href = fileUrl.value
  link.download = fileTitle.value
  link.click()
}

const reloadDocument = () => {
  loadWordDocument()
}

// 加载并转换Word文档
// 修改 loadWordDocument 方法，添加详细的调试信息
const loadWordDocument = async () => {
  try {
    loading.value = true
    error.value = ''
    htmlContent.value = ''

    console.log('开始加载Word文档，文件路径:', fileUrl.value)

    // 获取Word文件
    const response = await fetch(fileUrl.value)
    console.log('HTTP响应状态:', response.status, response.statusText)

    if (!response.ok) {
      throw new Error(`文件加载失败: ${response.status} ${response.statusText}`)
    }

    const arrayBuffer = await response.arrayBuffer()
    console.log('文件大小:', arrayBuffer.byteLength, 'bytes')

    // 使用Mammoth转换Word为HTML
    const result = await mammoth.convertToHtml({ arrayBuffer })
    console.log('Mammoth转换结果:', result)

    htmlContent.value = result.value
    console.log('HTML内容长度:', htmlContent.value.length)

    // 添加Word内容样式
    addWordContentStyles()

    ElMessage.success('文档加载成功')

  } catch (err) {
    console.error('Word文档转换失败:', err)
    error.value = '文档转换失败: ' + err.message
    ElMessage.error('文档加载失败')
  } finally {
    loading.value = false
  }
}

// 添加Word内容样式
const addWordContentStyles = () => {
  const styleId = 'word-content-styles'
  if (document.getElementById(styleId)) {
    return
  }

  const style = document.createElement('style')
  style.id = styleId
  style.textContent = `
    .word-content {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
      line-height: 1.6;
      color: #1f2d3d;
      padding: 20px;
    }

    /* 标题样式 */
    .word-content h1 {
      font-size: 24px;
      font-weight: 600;
      color: #1f2d3d;
      margin: 24px 0 16px 0;
      padding-bottom: 8px;
      border-bottom: 2px solid #409eff;
    }

    .word-content h2 {
      font-size: 20px;
      font-weight: 600;
      color: #1f2d3d;
      margin: 20px 0 12px 0;
      padding-bottom: 6px;
      border-bottom: 1px solid #dcdfe6;
    }

    .word-content h3 {
      font-size: 18px;
      font-weight: 600;
      color: #1f2d3d;
      margin: 16px 0 8px 0;
    }

    .word-content h4, .word-content h5, .word-content h6 {
      font-size: 16px;
      font-weight: 600;
      color: #1f2d3d;
      margin: 12px 0 8px 0;
    }

    /* 段落样式 */
    .word-content p {
      margin: 12px 0;
      color: #606266;
      text-align: justify;
    }

    /* 列表样式 */
    .word-content ul, .word-content ol {
      margin: 12px 0;
      padding-left: 24px;
      color: #606266;
    }

    .word-content li {
      margin: 4px 0;
    }

    /* 表格样式 */
    .word-content table {
      border-collapse: collapse;
      width: 100%;
      margin: 16px 0;
      border: 1px solid #dcdfe6;
      border-radius: 4px;
      overflow: hidden;
    }

    .word-content table th {
      background: #f5f7fa;
      color: #1f2d3d;
      font-weight: 600;
      padding: 12px;
      text-align: left;
      border: 1px solid #dcdfe6;
    }

    .word-content table td {
      padding: 12px;
      border: 1px solid #dcdfe6;
      color: #606266;
    }

    .word-content table tr:nth-child(even) {
      background: #fafafa;
    }

    .word-content table tr:hover {
      background: #f5f7fa;
    }

    /* 链接样式 */
    .word-content a {
      color: #409eff;
      text-decoration: none;
    }

    .word-content a:hover {
      text-decoration: underline;
      color: #337ecc;
    }

    /* 代码样式 */
    .word-content code {
      background: #f5f7fa;
      padding: 2px 6px;
      border-radius: 3px;
      font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
      font-size: 14px;
      color: #e74c3c;
    }

    /* 引用样式 */
    .word-content blockquote {
      border-left: 4px solid #409eff;
      background: #f5f7fa;
      padding: 12px 16px;
      margin: 16px 0;
      color: #606266;
      font-style: italic;
    }

    /* 图片样式 */
    .word-content img {
      max-width: 100%;
      height: auto;
      border-radius: 4px;
      margin: 16px 0;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    /* 强调样式 */
    .word-content strong {
      color: #1f2d3d;
      font-weight: 600;
    }

    .word-content em {
      color: #409eff;
      font-style: italic;
    }
  `
  document.head.appendChild(style)
}

onMounted(() => {
  // 从路由参数获取文件信息
  const { type, title } = route.query
  if (type) fileType.value = type
  if (title) fileTitle.value = title

  loadWordDocument()
})
</script>

<style scoped>
.file-viewer-page {
  //max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
  background: #f5f7fa;
  min-height: 100vh;
}

.back-button {
  margin-bottom: 20px;
}

.page-header {
  background: white;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.file-title {
  font-size: 24px;
  font-weight: 600;
  color: #1f2d3d;
  margin-bottom: 8px;
}

.file-meta {
  display: flex;
  gap: 20px;
  font-size: 14px;
  color: #606266;
}

/* Word查看器容器 */
.word-viewer-container {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.viewer-controls {
  margin-bottom: 20px;
  padding: 10px;
  background: #f5f7fa;
  border-radius: 6px;
  display: flex;
  gap: 10px;
}

.viewer-content {
  position: relative;
  min-height: 600px;
}

.word-content-container {
  background: white;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  overflow: auto;
  max-height: 800px;
}

.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.9);
  color: #409eff;
  z-index: 10;
}

.loading-icon {
  font-size: 32px;
  margin-bottom: 10px;
  animation: spin 1s linear infinite;
}

.error-message {
  margin: 20px 0;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .file-viewer-page {
    padding: 16px;
  }

  .word-content-container {
    max-height: 500px;
  }

  .viewer-controls {
    flex-direction: column;
  }
}
</style>
